<script setup>
import {ref} from "vue";
import {useRouter} from "vue-router";

const props = defineProps({
  title: {
    type: String,
    default: ""
  },
  path: {
    type: String,
    default: ""
  },
  subTitle: {
    type: String,
    default: ""
  },
})

const pathStyle = ref("font-weight:bold")
if (props.path !== "") {
  pathStyle.value = "color: #42A1FF"
}

function go() {
  if (props.path !== "") {
    useRouter().push({path: this.path})
  }
}

</script>
<template>
  <el-row>
    <el-col :span="24" class="height100">
      <div style="padding: 5px 0 15px 5px">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item>系统管理</el-breadcrumb-item>
          <el-breadcrumb-item><a @click="go" :style="pathStyle">{{ title }}</a></el-breadcrumb-item>
          <template v-if="subTitle !==''">
            <el-breadcrumb-item>{{ subTitle }}</el-breadcrumb-item>
          </template>
        </el-breadcrumb>
      </div>
      <el-card class="box-card">
        <slot name="body"></slot>
      </el-card>
    </el-col>
  </el-row>
</template>


<style scoped>
.bread {
  background-color: white;
  border-radius: 2px;
  padding: 15px;
  -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .2);
  box-shadow: 0 0 3px rgba(0, 0, 0, .2);
  height: 100%;
}

.box-card {
  width: 100%;
  min-width: 500px;
}
</style>
